//亮色图片
var uploadedDataURL1 = '/asset/get/s/data-1514970761653-ByzqAf9XG.png'
var uploadedDataURL2 = '/asset/get/s/data-1514970765660-B1I50M5QM.png'

var baifenbi = [0.333, 0.444, 0.555, 0.777, 0.888, 0.922]
var grayBar = [1, 1, 1, 1, 1, 1]
var paiming = [6, 5, 4, 3, 2, 1]
var zongjine = [2000, 3000, 4000, 5000, 6000, 7000]
var xingm = ['杨子涛', '李娜', '王军军', '陈翔', '刘亚娜', '张晓明']
export const option = {
    // backgroundColor: '#061A42',
    color: ['#61A8FF'], //进度条颜色
    title: {
        text: '店铺销量前五名',
        top: 15,
        left: 18,
        textStyle: {
            color: '#ffffff',
            fontSize: 20
        }
    },
    grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '12%'
    },
    xAxis: [
        {
            show: false
        },
        //由于下边X轴已经是百分比刻度了,所以需要在顶部加一个X轴,刻度是金额,也隐藏掉
        {
            show: false
        }
    ],
    yAxis: {
        type: 'category',
        axisLabel: {
            show: false //让Y轴数据不显示
        },
        itemStyle: {},
        axisTick: {
            show: false //隐藏Y轴刻度
        },
        axisLine: {
            show: false //隐藏Y轴线段
        },
        data: xingm
    },
    series: [
        //背景色--------------------我是分割线君------------------------------//
        {
            show: true,
            type: 'bar',
            barGap: '-100%',
            barWidth: '35%', //统计条宽度
            itemStyle: {
                color: 'rgba(102, 102, 102,0.5)'
            },
            z: 1,
            data: grayBar
        },
        //蓝条--------------------我是分割线君------------------------------//
        {
            show: true,
            type: 'bar',
            barGap: '-100%',
            barWidth: '35%', //统计条宽度
            itemStyle: {
                color: {
                    type: 'bar',
                    colorStops: [
                        {
                            offset: 0,
                            color: '#39A7FC' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#00FBFF' // 100% 处的颜色
                        }
                    ],
                    globalCoord: false // 缺省为 false
                }
            },
            max: 1,
            label: {
                show: false,
                color: '#fff', //百分比颜色
                position: 'inside',
                //百分比格式
                formatter: function (data: any) {
                    return (baifenbi[data.dataIndex] * 100).toFixed(1) + '%'
                }
            },
            labelLine: {
                show: false
            },
            z: 2,
            data: baifenbi
        },
        //数据条--------------------我是分割线君------------------------------//
        {
            show: true,
            type: 'bar',
            xAxisIndex: 1, //代表使用第二个X轴刻度!!!!!!!!!!!!!!!!!!!!!!!!
            barGap: '-100%',
            barWidth: '25%', //统计条宽度
            itemStyle: {
                barBorderRadius: 200,
                color: 'rgba(22,203,115,0.05)'
            },
            label: {
                show: true,
                //label 的position位置可以是top bottom left,right,也可以是固定值
                //在这里需要上下统一对齐,所以用固定值
                position: [0, '-100%'],
                rich: {
                    //富文本
                    white: {
                        //自定义颜色
                        color: '#ffffff'
                    },
                    start1: {
                        backgroundColor: {
                            image: uploadedDataURL1
                        }
                    },
                    start2: {
                        backgroundColor: {
                            //这里可以添加你想自定义的图片
                            image: uploadedDataURL2
                        }
                    },
                    green: {
                        color: '#70DDA7'
                    },
                    yellow: {
                        color: '#CCB877'
                    },
                    red: {
                        color: '#BC3C47'
                    },
                    gray: {
                        color: '#727CBA'
                    }
                },
                formatter: ''
            },
            data: zongjine
        }
    ]
}
